//礼物设置

import React, { useEffect, useState } from 'react';
import { get_gift_list, delete_gift_list } from '../../utils/api';
import Toptitle from '../../Compon/Toptitle';
import Tbale from '../ContentManagement/content_components/Tbale';
import Gooutfile from '../../Compon/file/Gooutfile.jsx';
import UploadFile from '../../Compon/UploadFile.tsx';
import moment from 'moment';
import { Button, message, Modal, Tag } from 'antd';
export default function Gift() {
  const [list, setlist] = useState([]);
  const a = async () => {
    const res = await get_gift_list();
    setlist(res.data.data);
  };
  useEffect(() => {
    a();
  }, []);
  const columns = [
    {
      title: 'ID',
      dataIndex: '_id',
      key: '_id',
    },
    {
      title: '礼物名称',
      dataIndex: 'gift_name',
      key: 'gift_name',
      render: (text, record, index) => {
        return <div>{text}</div>;
      },
      filterSearch: true,
      filterMultiple: true,
      onFilter: (value, record) => record.gift_name===value,
      filters:
        //去重
        Array.from(new Set(list.map((item: any) => item.gift_name))).map(
          (item: any) => {
            //先去重Array.from(new Set(list.map((item: any) => item.gift_name)))去重
            //再map遍历
            return {
              text: item,
              value: item,
            };
          },
        ),
    },
    {
      title: '礼物图标',
      dataIndex: 'gift_url',
      key: 'gift_url',
      render: (text: any) => (
        <img src={text} alt="" style={{ width: '0.4rem' }} />
      ),
    },
    {
      //价格
      title: '礼物价格',
      dataIndex: 'gift_price',
      key: 'gift_price',
      render: (text: any) => <div>{text}</div>,
    },
    {
      //数量
      title: '创建时间',
      dataIndex: 'gift_create_time',
      key: 'gift_create_time',
      render: (text: any) => (
        <div>
          <div>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</div>
        </div>
      ),
    },
    {
      //状态
      title: '礼物状态',
      dataIndex: 'gift_state',
      key: 'gift_state',
      render: (text: any) => (
        <Tag color={text == 1 ? 'green' : 'red'}>
          {text == 1 ? '已上架' : '已下架'}
        </Tag>
      ),
      filters: [
        {
          text: '已上架',
          value: 1,
        },
        {
          text: '已下架',
          value: 0,
        },
      ],
      filterSearch: true,
      filterMultiple: true,
      onFilter: (value: any, record: any) => record.gift_state == value,
    },
    {
      title: '操作',
      key: 'action',
      render: (text: any, record: any) => (
        <Button
          type="primary"
          danger
          onClick={async () => {
            if (confirm('确定删除吗')) {
              await delete_gift_list({ text: record._id });
              get_gift_list();
              message.success('删除成功');
            } else {
              message.error('取消删除');
            }
          }}
        >
          删除
        </Button>
      ),
    },
  ];
  return (
    <div>
      <Toptitle title="礼物管理"></Toptitle>
      <Tbale data={list} colums={columns}></Tbale>
      <div style={{ display: 'flex' }}>
        <UploadFile
          name={'导入'}
          // url="http://localhost:3000/CustomerService/index/uploadFile"
        ></UploadFile>

        <Gooutfile data={list}></Gooutfile>
      </div>
    </div>
  );
}
